<template>
  <SwitchHead title="流通数据" :subTitle="'历史折率'">
    <div class="circulPage">
      <div class="chartContaine"> 
        <div v-if="paintOne" class="chartView" id="cirDataChart"></div>
        <div v-if="!paintOne" class="chartView" id="pastRateDataChart"></div>
      </div>
    </div>
  </SwitchHead>
</template>
<script>
import SwitchHead from './specialHead';
import Echarts from 'echarts';
export default {
  data () {
    return {
      paintOne: true,
      cirDataOptions: {
        // animation: false,
        title: {
          text: '10298600-后胸肉NE-BRISKET-普通',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['Jan-13', 'Apr-13', 'Jul-13', 'Oct-13', 'Jan-14', 'Apr-14', 'Jul-14', 'Oct-14', 'Jan-15', 'Apr-15', 'Jul-15', 'Oct-15', 'Jan-16', 'Apr-16', 'Jul-16', 'Oct-16', 'Jan-17', 'Apr-17', 'Jul-17', 'Oct-17', 'Jan-18', 'Apr-18', 'Jul-18', 'Oct-18'],
            axisLabel: {
              rotate: 90,
              color: function () {
                return '#fff';
              },
              fontSize: 14
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 2,
            max: 4.00,
            interval: 0.5,
            splitLine: {
              lineStyle: {
                color: '#303541'
              }
            },
            axisLabel: {
              color: function () {
                return '#fff';
              },
              fontSize: 14
            },
            axisTick: {
              show: false
            }
          }
        ],
        calculable: true,
        dataZoom: {
          show: true,
          realtime: true,
          type: 'inside',
          y: 3,
          height: 15,
          start: 0,
          end: 50,
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            data: [3, 3, 2.91, 2.66, 3.09, 2, 4, 3, 3.2, 2, 2, 3, 2, 2.1, 2.2, 3.3, 2.5, 2.12, 2.4, 2.31, 2.99, 3.4, 3.3, 3.0, 3.5, 3.8, 3.33, 3.1, 2.8],
            type: 'line',
            smooth: true
          }
        ]
      },
      pastRateOptions: {
        title: {
          text: '10298600-后胸肉NE-BRISKET-普通-2',
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        },
        xAxis: {
          type: 'category',
          data: ['Jan-13', 'Apr-13', 'Jul-13', 'Oct-13', 'Jan-14', 'Apr-14', 'Jul-14', 'Oct-14', 'Jan-15', 'Apr-15', 'Jul-15', 'Oct-15', 'Jan-16', 'Apr-16', 'Jul-16', 'Oct-16', 'Jan-17', 'Apr-17', 'Jul-17', 'Oct-17', 'Jan-18', 'Apr-18', 'Jul-18', 'Oct-18'],
          axisLabel: {
            rotate: 90,
            color: function () {
              return '#fff';
            },
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: 4.00,
          splitLine: {
            lineStyle: {
              color: '#303541'
            }
          },
          axisLabel: {
            color: function () {
              return '#fff';
            },
            fontSize: 14
          },
          axisTick: {
            show: false
          }
        },
        dataZoom: {
          show: true,
          realtime: true,
          type: 'slider',
          y: 355,
          height: 15,
          start: 0,
          end: 50,
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [{
          data: [3, 3, 0.91, 2.66, 3.09, 2, 4, 3, 3.2, 2, 1, 3, 2, 2.1, 2.2, 3.3, 2.5, 2.12, 1.4, 2.31, 1, 0.4, 0.3, 0],
          type: 'line',
          smooth: true
        }]
      }
    };
  },
  mounted () {
  // this.$nextTick(() => {
  // 为什么两个一起执在行则 getAttribute属性是null;有时一个执行也是；是因为使用了v- if
    this.paintCirData();
        // this.paintPastData();
  // });
  },
  methods: {
    paintCirData () {
      let cirChartView = Echarts.init(document.getElementById('cirDataChart'));
      cirChartView.setOption(this.cirDataOptions);
    },
    paintPastData () {
      let pastChartView = Echarts.init(document.getElementById('pastRateDataChart'));
      pastChartView.setOption(this.pastRateOptions);
    }
  },
  components: {
    SwitchHead
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .circulPage{
    height: 251px;
    width: 100%;
    border: 1px solid #303541;
    overflow: hidden;
    .chartContaine{
      margin: 10px 20px;
      width: 720px;
      height: 230px;
      .chartView{
        width: 100%;
        height: 100%;
      }
    }
  }
</style>